import header from "./header.js";
import renderNav from "./renderNav.js";

let headerCon = document.querySelector(".header .container");
headerCon.innerHTML = header();

let submenu = document.querySelector(".submenu div");
let nav_list = document.querySelector(".nav_list");

// 从本地存储中获取数据渲染 导航
let data = JSON.parse(localStorage.getItem("navData"));
submenu.innerHTML = renderNav(data);
nav_list.innerHTML = renderNav(data);

/* 
    获取元素
    获取数据
    根据数据渲染生成结构
    
*/

let list = document.querySelector(".content .list");

getData();

async function getData() {
    let res = await pAjax({
        url: "https://muse.huaban.com/api/v1/users/",
        data: { page: 3, limit: 20 },
    });

    let data = JSON.parse(res);

    // console.log(data);
    render(data);
}

function renderXing(num) {
    let str = "";
    switch (Math.round(num)) {
        case 5:
            for (var i = 0; i < 5; i++) {
                str += `<i class="iconfont icon-shoucang active"></i>`;
            }
            break;
        case 4:
            for (var i = 0; i < 4; i++) {
                str += `<i class="iconfont icon-shoucang active"></i>`;
            }
            str += `<i class="iconfont icon-shoucang"></i>`;
            break;
        case 3:
            for (var i = 0; i < 3; i++) {
                str += `<i class="iconfont icon-shoucang active"></i>`;
            }
            for (var i = 0; i < 2; i++) {
                str += `<i class="iconfont icon-shoucang"></i>`;
            }
            break;
        case 2:
            for (var i = 0; i < 2; i++) {
                str += `<i class="iconfont icon-shoucang active"></i>`;
            }
            for (var i = 0; i < 3; i++) {
                str += `<i class="iconfont icon-shoucang"></i>`;
            }
            break;
        case 1:
            for (var i = 0; i < 1; i++) {
                str += `<i class="iconfont icon-shoucang active"></i>`;
            }
            for (var i = 0; i < 4; i++) {
                str += `<i class="iconfont icon-shoucang"></i>`;
            }
            break;
        case 0:
            for (var i = 0; i < 5; i++) {
                str += `<i class="iconfont icon-shoucang"></i>`;
            }
    }
    return str;
}

let info = {
    designer: "平面设计师",
    photographer: "摄影师",
    illustrator: "插画师",
    graphic: "漫画师",
    artisan: "手工艺人",
    other: "其他",
};

function render(listData) {
    console.log(listData);
    // https://hbimg.huabanimg.com/4702562b4f0a201f2b655b382c2f80c70a7c3b4872d7-yLqHyn_/both/140x140
    list.innerHTML = listData
        .map((item) => {
            return `<div class="list-item">
            <div class="item-title">
                <div class="title-left">
                    <label class="name-label">${item.username}</label>
                    <div class="meta">
                        <span class="item">${
                            item.service_count
                        }个服务设计</span>

                        ${
                            item.extra.rating
                                ? ` <span class="item">
                            评价:
                            <span class="rate view">
                                ${renderXing(item.extra.rating)}
                            </span>
                        </span>`
                                : ""
                        }
                    </div>
                    <div class="tags">
                        ${item.category
                            .map((value) => {
                                return `<label class="type-babel">${info[value]}</label>`;
                            })
                            .join("")}
                    </div>
                </div>
                <div class="title-right">
                    <img
                        src="https://hbimg.huabanimg.com/${
                            item.avatar.key
                        }_/both/140x140"
                        alt=""
                    />
                </div>
            </div>
            <div class="item-text">
                自由插画师，擅长Q版、绘本、儿插风格、商业插画，有新媒体、传统广告工作经历，多年绘画经验，有个人风格。可以根据故事文案进行插画，条漫创作。服...
            </div>
        </div>`;
        })
        .join("");
}
